import React from 'react';
import { Menu, Modal, Dropdown } from 'antd';
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';
const { confirm } = Modal;

export interface MenuItem<T> {
  name: string | ((arg: T) => string);
  fn(record: T): void;
  disabled?(record: T): boolean;
}

interface Props<T> {
  menuList: MenuItem<T>[];
  onEditClick?(record: T): void;
  record: T;
  showEdit?: boolean;
  editText?: string;
}

const TableActions = <T extends {}>(props: Props<T>) => {
  const { onEditClick, record, menuList, showEdit = true, editText } = props;

  const menu = (record: T) => (
    <Menu>
      {menuList.map((item) => {
        const disabled = item.disabled ? item.disabled(record) : false;
        const dealName =
          typeof item.name === 'function' ? item.name(record) : item.name;
        return (
          <Menu.Item key={dealName}>
            <div
              className={
                disabled
                  ? 'action-disabled'
                  : item.name === '删除'
                  ? 'action-del'
                  : 'action-edit'
              }
              onClick={() => {
                if (disabled) return;
                if (item.name === '删除') {
                  return confirm({
                    icon: <ExclamationCircleOutlined />,
                    content: '确 定 删 除 吗  ？',
                    cancelText: '取消',
                    okText: '确定',
                    okButtonProps: {
                      danger: true,
                      type: 'primary',
                    },
                    onOk() {
                      item.fn(record);
                    },
                  });
                }
                item.fn(record);
              }}
            >
              {dealName}
            </div>
          </Menu.Item>
        );
      })}
    </Menu>
  );

  return (
    <div>
      {showEdit && (
        <>
          <span
            className="action-edit"
            onClick={() => {
              onEditClick && onEditClick(record);
            }}
          >
            {editText || '编辑'}
          </span>
          <span className="action-split">|</span>
        </>
      )}

      <Dropdown overlay={menu(record)}>
        <span className="action-edit">
          更多
          <DownOutlined />
        </span>
      </Dropdown>
    </div>
  );
};

// const TableAction: FC<Props> = (props) => {
//     const { onEditClick, record, menuList } = props

//     const menu = (record: any) => (
//         <Menu>
//             {menuList.map((item) => {
//                 const disabled = item.disabled ? item.disabled(record) : false

//                 return (
//                     <Menu.Item key={item.name}>
//                         <span
//                             className={disabled ? 'action-disabled' : item.name === '删除' ? 'action-del' : 'action-edit'}
//                             onClick={() => {
//                                 if (disabled) return
//                                 if (item.name === '删除') {
//                                     return confirm({
//                                         icon: <ExclamationCircleOutlined />,
//                                         content: '确 定 删 除 吗  ？',
//                                         onOk() {
//                                             item.fn(record)
//                                         },
//                                     })
//                                 }
//                                 item.fn(record)
//                             }}
//                         >
//                             {item.name}
//                         </span>
//                     </Menu.Item>
//                 )
//             })}
//         </Menu>
//     )

//     return (
//         <div>
//             <span
//                 className='action-edit'
//                 onClick={() => {
//                     onEditClick && onEditClick(record)
//                 }}
//             >
//                 编辑
//             </span>
//             <span className='action-split'>|</span>
//             <Dropdown overlay={menu(record)}>
//                 <span className='action-edit'>
//                     更多
//                     <DownOutlined />
//                 </span>
//             </Dropdown>
//         </div>
//     )
// }

export default TableActions;
